<template>
	<el-dialog title="" v-model="isShowDialog" width="800px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<table style=" table-layout:fixed;width:100%">
			<thead>
				<tr>
					<th style="text-align:center">未加入账号</th>
					<th style="width:60px;"> </th>
					<th style="text-align:center"> ”{{ruleForm.Name}}" 成员</th>
				</tr>
				<tr>
					<td>
						<select style="width:100%; height:300px;padding:10px" multiple ref="usersref">
							<option v-for="item in users" :key="item.ID" :label="item.Name+' ('+item.AccountName+')'"
								:value="item.ID">
							</option>
						</select>

					</td>
					<td style="width:60px;height:300px; text-align:center;vertical-align:middle">
						<el-button style="width: 50px; margin: 8px 5px;" @click="appendItems">&gt;</el-button>
						<el-button style="width: 50px; margin: 8px 5px;" @click="appendAll">&gt;&gt;</el-button>
						<el-button style="width: 50px; margin: 8px 5px;" @click="removeItems">&lt;</el-button>
						<el-button style="width: 50px; margin: 8px 5px;" @click="removeAll">&lt;&lt;</el-button>
					</td>
					<td>
						<select multiple style="width:100%;height:300px;padding:10px" ref="membersref">
							<option v-for="item in members" :key="item.ID" :label="item.Name+' ('+item.AccountName+')'"
								:value="item.ID">
							</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="3" style="text-align:left" id="divPagination2"></td>
				</tr>
			</thead>
		</table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default"> 提交 </el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		ref,
	} from 'vue';
	import {
		saveMembersAPI,
		getUsersMembersAPI,
	} from '/@/api/usersroles/index';
	import {
		ElForm,
		ElMessage
	} from 'element-plus';
	export default {
		name: 'menbers',
		setup() {
			const usersref = ref();
			const membersref = ref();
			type FormInstance = InstanceType < typeof ElForm > ;
			const userForm = ref < FormInstance > ();
			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					ID: "0",

				},
				members: [],
				users: [],
			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.ruleForm = model;
				state.members = [];
				state.users = [];
				getMembers();
				state.isShowDialog = true;
				state.callback = callback;
			};
			// 关闭弹窗
			const closeDialog = () => {

				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};
			// 保存
			const onSubmit = () => {
				let ID = state.ruleForm.ID;
				let selecteditem = [];

				for (let i = 0; i < membersref.value.options.length; i++) {
					let item = membersref.value.options[i];
					selecteditem.push(item.value);
				}
				// console.log(selecteditem);
				let Members = selecteditem.join(",");

				let params = {
					Members,
					ID
				};
				 
				saveMembersAPI(params).then(async (response) => {
					//console.log(response);
					if (response['code'] === 0) {
						if (state.callback) {
							state.callback();
						}
						ElMessage.success(`${response.message}`);
						closeDialog();
					}


				});
			};

			// 页面加载时
			onMounted(() => {

			});

			const getMembers = () => {
				let ID = state.ruleForm.ID;
				//console.log(ID);
				getUsersMembersAPI({
					ID
				}).then(async (response) => {
					//console.log(response);
					if (response['code'] === 0) {
						state.members = [];
						state.users = [];
						for (let i = 0; i < response['result'].length; i++) {
							let data = response['result'][i];
							if (data.Joined === null) {
								state.users.push(data);
							} else {
								state.members.push(data);
							}
						}

					}
				});
			}
			const appendItems = () => {
				let selecteditem = [];
				for (let i = 0; i < usersref.value.options.length; i++) {
					let item = usersref.value.options[i];
					if (item.selected) {
						selecteditem.push(item);
					}
				}
				for (let i = 0; i < selecteditem.length; i++) {
					let item = selecteditem[i];
					usersref.value.removeChild(item);
					membersref.value.appendChild(item);
				}

			}
			const appendAll = () => {
				let selecteditem = [];
				for (let i = 0; i < usersref.value.options.length; i++) {
					let item = usersref.value.options[i];
					selecteditem.push(item);
				}
				for (let i = 0; i < selecteditem.length; i++) {
					let item = selecteditem[i];
					usersref.value.removeChild(item);
					membersref.value.appendChild(item);
				}

			}
			const removeItems = () => {
				let selecteditem = [];

				for (let i = 0; i < membersref.value.options.length; i++) {
					let item = membersref.value.options[i];
					if (item.selected) {
						selecteditem.push(item);

					}
				}
				for (let i = 0; i < selecteditem.length; i++) {
					let item = selecteditem[i];
					membersref.value.removeChild(item);
					usersref.value.appendChild(item);
				}

			}
			const removeAll = () => {
				let selecteditem = [];

				for (let i = 0; i < membersref.value.options.length; i++) {
					let item = membersref.value.options[i];
					selecteditem.push(item);
				}
				for (let i = 0; i < selecteditem.length; i++) {
					let item = selecteditem[i];
					membersref.value.removeChild(item);
					usersref.value.appendChild(item);
				}

			}
			return {
				userForm,
				openDialog,
				closeDialog,
				onCancel,
				onSubmit,
				usersref,
				...toRefs(state),
				membersref,
				appendItems,
				appendAll,
				removeItems,
				removeAll,
			};
		},
	};
</script>
